<template>
  <div ref="totalWrapperRef" class="scrollTable-wrap">
    <div class="table-coloum">
      <div v-if="showNo" class="table-coloum-item" style="flex: 0.5">序号</div>
      <div v-else class="table-coloum-item" style="flex: 0.3"></div>
      <div
        v-for="(item, index) in tableColoum"
        :key="index"
        class="table-coloum-item"
        :style="
          item?.width
            ? {
                flex: 'none',
                width: item?.width + 'px'
              }
            : {}
        "
      >
        {{ item.label }}
      </div>
    </div>
    <div ref="container" class="table-item-list" @mouseenter="handleMouse(true)" @mouseleave="handleMouse(false)">
      <div v-for="(tableData, index) in list" :key="index" class="table-item" :class="tableData.index % 2 == 0 ? 'banner' : ''">
        <div v-if="showNo" style="flex: 0.5">{{ tableData.index }}</div>
        <div v-else style="flex: 0.3">{{ tableData.no }}</div>
        <div
          v-for="(item, tableIndex) in tableColoum"
          :key="tableIndex"
          :style="
            item?.width
              ? {
                  flex: 'none',
                  width: item?.width + 'px'
                }
              : {}
          "
        >
          {{ tableData[item.prop] }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as TWEEN from '@tweenjs/tween.js';
import { px } from '@/utils/utils';
export default {
  props: {
    showNo: {
      type: Boolean,
      default: true
    },
    tableColoum: {
      type: Array,
      default: () => [
        {
          label: '项目名称',
          prop: 'name'
        },
        {
          label: '符合状态',
          prop: 'status'
        },
        {
          label: '报警时间',
          prop: 'reportTime'
        },
        {
          label: '报警类型',
          prop: 'warnType'
        },
        {
          label: '设备类型',
          prop: 'deviceType'
        },
        {
          label: '设备编号',
          prop: 'deviceSn'
        },
        {
          label: '报警信息',
          prop: 'warningContent'
        }
      ]
    }
  },
  data() {
    return {
      timer: null,
      instance: null,
      list: [
        {
          name: '1#变压器传感器',
          no: '①',
          status: '失联',
          warnType: 1,
          reportTime: '08:21'
        },
        {
          name: '23#温湿度传感器',
          status: '烟雾值',
          no: '②',
          warnType: 3,
          reportTime: '08:32'
        },
        {
          name: '9#红外被动探测器',
          status: '失联',
          no: '③',
          warnType: 2,
          reportTime: '09:44'
        },
        {
          name: '18#巡更锚点',
          status: '失联',
          warnType: 3,
          no: '④',
          reportTime: '14:15'
        },
        {
          name: '7#巡更锚点',
          status: '失联',
          warnType: 2,
          no: '⑤',
          reportTime: '14:45'
        },
        {
          name: '26#红外被动探测器',
          status: '检测到异常',
          warnType: 2,
          no: '⑥',
          reportTime: '14:59'
        },
        {
          name: '3#风机房',
          status: '风机卡住',
          warnType: 1,
          no: '⑦',
          reportTime: '16:42'
        },
        {
          name: '6#变压器传感器',
          status: '失联',
          warnType: 2,
          no: '⑧',
          reportTime: '17:43'
        },
        {
          name: '2#风机房',
          status: '检测到水流',
          warnType: 3,
          no: '⑨',
          reportTime: '12:53'
        },
        {
          name: '18#巡更锚点',
          status: '失联',
          warnType: 3,
          no: '⑩',
          reportTime: '14:15'
        }
      ].map((v, index) => ({
        ...v,
        index: index + 1
      }))
    };
  },
  beforeDestroy() {
    // window.clearInterval(this.timer);
    this.instance.stop();
    cancelAnimationFrame(this.timer);
  },
  mounted() {
    const currentHight = this.$refs.totalWrapperRef.clientHeight;
    this.instance = new TWEEN.Tween({ top: 0 })
      .to({ top: this.$refs.container.clientHeight - currentHight + 2 * px(50) }, this.list.length * 1500)
      .onUpdate(e => {
        this.$refs.container.style.top = `-${e.top}px`;
      })
      .onRepeat(() => {
        console.log('重复开始了', this.instance);
        this.instance.pause();
        setTimeout(() => {
          this.instance.resume();
        }, 1000);
        // setTimeout(() => {
        //   self.timer.resume();
        // }, 1000);
      })
      .repeat(Infinity)
      .start();
    const animate = () => {
      this.timer = requestAnimationFrame(animate);
      TWEEN.update();
    };
    if (this.$refs.container.clientHeight < this.$refs.totalWrapperRef.clientHeight) {
      this.instance.stop();
      return;
    }
    animate();
    // if (this.timer) {
    //   window.clearInterval(this.timer);
    // }
    // this.timer = setInterval(() => {
    //   this.$refs.container.classList.add('scroll');
    //   setTimeout(() => {
    //     if (!this.timer) {
    //       return;
    //     }
    //     this.$refs.container.classList.remove('scroll');
    //     this.list.push(this.list.shift());
    //   }, 1000);
    // }, 2000);
  },
  methods: {
    handleMouse(reuslt) {
      // eslint-disable-next-line no-unused-expressions
      reuslt ? this.instance.pause() : this.instance.resume();
    }
  }
};
</script>
<style lang="scss">
@keyframes row-out {
  from {
    top: 0;
  }
  to {
    top: px(-45);
  }
}
.scrollTable-wrap {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: px(40);
  .table-coloum {
    background: rgba(23, 41, 67, 1);
    box-sizing: border-box;
    padding: 0 px(8);
    height: px(40);
    width: 100%;
    z-index: 88;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    .table-coloum-item {
      font-size: px(14);
      flex: 1;
      color: #00c8ff;
    }
  }
}
.table-item-list {
  display: flex;
  flex-direction: column;
  grid-gap: px(8);
  position: relative;
  // overflow: hidden;
  &.scroll {
    position: relative;
    animation: row-out 1s linear forwards;
    .row:first-child {
      opacity: 0;
      transition: opacity 1s;
    }
  }
  .table-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: px(4) px(8);
    font-size: px(14);
    max-height: px(40);
    color: #fff;
    box-sizing: border-box;
    min-height: px(40);
    &.banner {
      background-color: rgba(38, 150, 214, 0.2);
    }
    > div {
      flex: 1;
      padding-left: px(5);
    }
  }
}
</style>
